<template>
  <view class="contents">
    <view class="container" :style="{'background-image': 'url('+ bg_img +')'}">
      <!-- <view class="img center mb-60"> -->
      <!-- <image src="../../static/img/share/info.png" mode="aspectFill" class="info"></image> -->
      <!-- <view class="info"></view> -->
      <!-- </view> -->

<!--      <view class="share-icon" @click="showBtn()">-->
<!--        <u-icon name="share-square" color="#fff" size="28"></u-icon>-->
<!--      </view>-->
      <image class="img" :src="qr_imgs"></image>

      <view class="erweima">
        <qrcode ref="qrcode" :val="register_url" :size="size" :background="background" :foreground="foreground" :pdground="pdground"
                :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" @result="qrR" />
      </view>
      <view class="w560" v-if="btnFlag">
        <view class="ptb-16 plr-50 size-28 white bg1" @click="save">请截图保存图片</view>
        <!-- <view class="ptb-16 plr-50 size-28 white bg2" @tap="copy(register_url)">复制链接</view> -->
      </view>
      <!-- <view class="list" v-if="team.length>0">
        <view class="title"></view>
        <view class="con plr-24">
          <view class="flex bb ptb-28 listcon" v-for="(item,index) in team" :key="index">
            <image :src="item.head_image" mode="aspectFill" class="userimg"></image>
            <view class="size-28 white">{{item.phone}}</view>
            <view class="size-28 white autor">{{item.create_time}}</view>
          </view>
        </view>
      </view> -->
    </view>
    <view class="yaoqing" :style="{'background-image': 'url('+ jiangli_bg_img +')'}">
      <view class="list_container">
        <view class="t1">我已邀请<text ><span></span>{{invate_num}}</text>人</view>
        <view class="t2">
          <view class="flex flex-js-end">
            <view class="card">实名
              <text>
                <span>{{real_num}}</span>
              </text>人
            </view>
          </view>
          <view>
            <view class="card">购买
              <text data-v-3d45a5a0="">{{buy_num}}<span></span></text>人
            </view>
          </view>
        </view>

        <view class="con">
          <view class="header">
            <text ><span>编号</span></text>
            <text ><span>用户手机</span></text>
            <text><span>邀请结果</span></text>
            <text><span>首次消费时间</span></text>
          </view>
          <scroll-view class="u-list" style="height: 231px;" scroll-y="true" :lower-threshold="80" @scrolltolower="onReachScollBottom">
            <view class="scroll-view-item" v-for="(item,index) in yaoqinglist">
              <text class="bianhao">{{item.id}}</text>
              <text class="shouji">{{item.phone}}</text>
              <text class="jieguo">{{item.invate}}</text>
              <text class="jieguo">{{item.first}}</text>
            </view>

          </scroll-view>
        </view>
      </view>
    </view>
    <view class="copyright_con">
      <view class="u-transition u-fade-enter-to u-fade-enter-active" style="transition-duration: 1000ms; transition-timing-function: ease-out;">
        <view class="u-image" style="width: 202px; height: 33px; border-radius: 0px; overflow: visible; background-color: transparent;">
          <img :src="tupianimg" draggable="false"  style="border-radius: 0px; width: 202px; height: 38px;"/>
        </view>
      </view>
    </view>

    <view class="save_btn" style="background: #F8B483FF;border:4px solid  #fcddc8;border-radius: 15px">
      <view @click="copy">
        <view class="flex-center" style="width: calc(28px); height: calc(28px);">
          <image src="../../static/img/lianjie.webp" style="width: calc(18px); height: calc(18px);">
          </image>
        </view>
        <text>复制链接</text>
      </view>
<!--      <view @click="download()">-->
<!--        <view class="flex-center" style="width: calc(18px); height: calc(18px);">-->
<!--          <image src="../../static/img/download.webp" style="width: calc(18px); height: calc(18px);">-->
<!--          </image>-->
<!--        </view>-->
<!--        <text>-->
<!--          保存图片-->
<!--        </text>-->
<!--      </view>-->
    </view>
<!--    弹框-->
    <uni-popup ref="popup" class="win_popup" type="center" :mask-click="false" :animation="false">
      <view class="popup-content">
        <view class="close" @tap="closeManghe"> <image class="image" :src="close_imgs" style="width: calc(24px);height: calc(24px);"></image> </view>
        <view class="manghe_content poster_con">
          <image class="image" :src="qr_imgs"></image>
        </view>
      </view>
    </uni-popup>
  </view>

</template>

<script>
	import qrcode from '../../components/tki-qrcode/tki-qrcode.vue'
	export default {
		data() {
			return {
				team:[],
				register_url:'',
				btnFlag: false,
				qr_code_img: '',
				//二维码
				val: '', //二维码内容
				size: 200,
				background: '#ffffff',
				foreground: '#000000',
				pdground: '#000000',
				icon: '',
				iconsize: 50,
				lv: 3,
				onval: true,
				loadMake: true,
				src: '',
        qr_imgs:'',
				bg_img: require('@/static/img/shareBg.jpg'),
        jiangli_bg_img: require('@/static/img/jiangli.webp'),
        tupianimg: require('@/static/img/tishi.webp'),
        close_imgs:require('@/static/img/close.webp'),
        yaoqinglist:[
        ],
        buy_num : "",
        invate_num : "",
        real_num : '',
        links:''
			};
		},
		components: {
			qrcode
		},
		onLoad() {
		  this.init()
      this.getma()
		},
		methods: {
		  getma(){
        this.$http.get('user/getqrcode').then(res => {
          if (res.code == 1) {
            // this.register_url=res.data.register_url
            // this.qr_code_img=res.data.qr_code_img
            this.qr_imgs = res.data.yqm
            this.links = res.data.link
          }
        })
      },
		  init(){
        this.$http.get('user/invatedata').then(res => {
          if (res.code == 1) {
            this.buy_num = res.data.buy_num
            this.invate_num = res.data.invate_num
            this.real_num = res.data.real_num
            this.yaoqinglist=res.data.list
            console.log(res)
          }
        })
      },
      onReachScollBottom(){
      },
      download(){
        this.$refs.popup.open('center')
        this.loadqr()
      },
		  loadqr(){
        var oA = document.createElement("a");
        oA.download = 'share.jpg'; // 设置下载的文件名，默认是'下载'
        oA.href = this.qr_imgs
        document.body.appendChild(oA);
        oA.click();
        oA.remove();
      },
      closeManghe() {
        this.$refs.popup.close()
        this.is_mask = false;
      },
      copy(code) {
        // var pages = getCurrentPages() // 获取栈实例
        // let domain = 'http://xxxxxx.com/'//项目的域名
        // let currentRoute  = pages[pages.length-1].route; // 获取当前页面路由
        // let currentPage = domain + pages[pages.length-1]['$page']['fullPath'] //当前页面路径(带参数)
        uni.setClipboardData({
          data: this.links,
          success: () => {
            setTimeout(()=>{
              uni.showToast({
                title: '内容已复制',
              });
            })
          }
        });
        uni.hideToast();
      },

			creatQrcode() {
				this.$refs.qrcode._makeCode()
			},
			qrR(res) {
				this.src = res
			},
			save() {
				uni.downloadFile({
					url: this.qr_code_img, //仅为示例，并非真实的资源
					success: (res) => {
						console.log(res)
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: '保存成功'
									})
								}
							});
						}
					}
				});

			},
			showBtn() {
				this.btnFlag = true
			},

		},
	};
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style scoped lang="scss">
uni-page-head .uni-page-head{
  background-color: rgba(35, 39, 44, 0)!important;
}
.contents {
  background-color: rgb(247, 192, 153);
  position: relative;
  padding-bottom: 130px;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  .container {
    width: 390px;
    height: 650px;
    position: relative;
    background: #181818;
    background-size: 100%;
    overflow: hidden;
    .img{
      width: 114px;
      height: 114px;
      position: absolute;
      left: calc(50% - 57px);
      top: 248px;
      display: block;
    }
    .share-icon {
      position: absolute;
      z-index: 1000;
      top: 14rpx;
      right: 20rpx;
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, .5);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .info {
      width: 654 rpx;
      height: 186 rpx;
      margin: 200 rpx auto 0;
    }

    .erweima {
      // width: 564rpx;
      // height: 780rpx;
      // background: url(../../static/img/share/11.png) no-repeat;
      // background-size: 564rpx 680rpx;
      // margin: 0 auto 0;
      // padding: 450rpx 180rpx 0;
      // box-sizing: border-box;
      display: flex;
      justify-content: center;

      .tki-qrcode {
        position: absolute !important;
        bottom: 220 rpx;
      }
    }

    .list {
      width: 694 rpx;
      margin: 60 rpx auto 0;

      .title {
        height: 68 rpx;
        position: relative;
        width: 100%;

        &::after {
          position: absolute;
          bottom: 0;
          content: '';
          width: 100%;
          height: 30 rpx;
          left: 0;
          z-index: 8;
          background: #3C3C3C;
        }

        &::before {
          position: absolute;
          bottom: 0;
          content: '';
          width: 100%;
          height: 68 rpx;
          left: 204 rpx;
          background: url(../../static/img/share/list.png) no-repeat;
          background-size: 286 rpx 68 rpx;
          z-index: 9;
        }
      }

      .con {
        padding-top: 30 rpx;
        background: #3C3C3C;
        box-sizing: border-box;

        .listcon {
          border-bottom: 2 rpx solid #434343;
        }
      }

      .userimg {
        width: 50 rpx;
        height: 50 rpx;
        margin-right: 20 rpx;
        border-radius: 50%;
      }
    }

    .w560 {
      width: 100%;
      margin-bottom: 30 rpx;
      display: flex;
      justify-content: space-around;
      position: absolute;
      bottom: 60 rpx;
    }

    .bg1 {
      background: #A4805C;
      border-radius: 8 rpx;
    }

    .bg2 {
      background: #F9C21A;
      border-radius: 8 rpx;
    }
  }
  .yaoqing{
    width: 317px;
    height: 477px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .list_container{
      height: 100%;
      padding: 54px 16px 0;
      .t1{
        width: 100%;
        color: #252525;
        font-size: 11px;
        text-align: center;
        text{
          color: #f3d575;
          margin: 0 5px;
        }
      }
      .t2{
        width: 100%;
        margin-top: 7px;
        display: flex;
        justify-content: space-between;
        view{
          width: 46%;
          display: flex;
          justify-content: center;
         .card{
            padding: 2px 7px;
            font-size: 9px;
            background-color: #e8502b;
            border-radius: 26px;
            color: #333;
           text{
             color: #f3d575;
             margin: 0 5px;
           }
          }
        }
      }
      .con{
        width: 100%;
        height: 270px;
        background-color: #fff4f2;
        margin-top: 14px;
        border-radius: 10px;
        overflow: hidden;
        .header {
          width: 100%;
          height: 47px;
          background-color: #fef3d7;
          display: flex;
          align-items: center;
          justify-content: center;
          text:nth-child(1), view:nth-child(1) {
            width: 12%;
            padding-left: 15px;
            display: inline-block;
            font-size: 14px;
            color: #6d4017;
            font-weight: 500;
          }
          text:nth-child(2), view:nth-child(2) {
            width: 26%;
            text-align: center;
            display: inline-block;
            font-size: 14px;
            color: #6d4017;
            font-weight: 500;
          }
          text:nth-child(3), view:nth-child(3) {
            width: 30%;
            text-align: center;
            display: inline-block;
            font-size: 14px;
            color: #6d4017;
            font-weight: 500;
          }
          text:nth-child(4), view:nth-child(4) {
            width: 32%;
            text-align: center;
            display: inline-block;
            font-size: 14px;
            color: #6d4017;
            font-weight: 500;
          }
        }
        .u-list {
          display: flex;
          flex-direction: column;
          .uni-scroll-view, .uni-scroll-view-content {
            width: 100%;
            height: 100%;
          }
          .scroll-view-item{
            padding: 4px;
            border-bottom: 1px solid #faecd8;
            text:nth-child(1), view:nth-child(1) {
              width: 6%;
              padding-left: 10px;
              display: inline-block;
              font-size: 14px;
              color: #333;
              font-weight: 500;
            }
            text:nth-child(2), view:nth-child(2) {
              width: 30%;
              text-align: center;
              display: inline-block;
              font-size: 14px;
              color: #333;
              font-weight: 500;
            }
            text:nth-child(3), view:nth-child(3) {
              width:30%;
              text-align: center;
              display: inline-block;
              font-size: 14px;
              color: #333;
              font-weight: 500;
            }
            text:nth-child(4), view:nth-child(4) {
              width: 30%;
              text-align: center;
              display: inline-block;
              font-size: 14px;
              color: #333;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
  .copyright_con {
    height: 33px;
    margin-top: 12px;
  }
  .save_btn {
    width: 278px;
    height: 62px;
    position: fixed;
    left: calc(50% - 139px);
    bottom: 41px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    view{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .flex-center{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      text{
        margin-left: 5px;
        font-size: 18px;
        color: #fff;
      }
    }
  }
}
.popup-content{
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
  align-items: stretch;
  .close {
    width: 100%;
    height: 41px;
    display: flex;
    justify-content: flex-end;
  }
  .poster_con {
    width: 318px;
    image{
      height: 400px;
    }
  }
}
</style>
